<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>缺陷上报 - 管道巡检App</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body { 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            -webkit-user-select: none;
            user-select: none;
        }
        .ios-statusbar {
            height: 44px;
            background: linear-gradient(135deg, #000 0%, #333 100%);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            color: white;
            font-size: 14px;
            font-weight: 600;
        }
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-top: 1px solid #e5e7eb;
            padding: 8px 0 20px 0;
        }
        .photo-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }
        .photo-item {
            aspect-ratio: 1;
            border: 2px dashed #d1d5db;
            border-radius: 8px;
            display: flex;
            items-center: center;
            justify-content: center;
            background: #f9fafb;
        }
    </style>
</head>
<body class="bg-gray-50 pb-20">
    <!-- iOS状态栏 -->
    <div class="ios-statusbar">
        <span>9:41</span>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal"></i>
            <i class="fas fa-wifi"></i>
            <div class="w-6 h-3 border border-white rounded-sm">
                <div class="w-4 h-1.5 bg-white rounded-sm m-0.5"></div>
            </div>
        </div>
    </div>

    <!-- 顶部导航 -->
    <div class="bg-white px-4 py-4 border-b border-gray-200">
        <div class="flex justify-between items-center">
            <button class="w-8 h-8 flex items-center justify-center">
                <i class="fas fa-arrow-left text-gray-600"></i>
            </button>
            <h1 class="text-lg font-semibold text-gray-800">缺陷上报</h1>
            <button class="text-red-600 font-medium">提交</button>
        </div>
    </div>

    <!-- 位置信息 -->
    <div class="bg-blue-500 text-white px-4 py-4">
        <div class="flex items-center space-x-3">
            <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
                <i class="fas fa-map-marker-alt text-xl"></i>
            </div>
            <div class="flex-1">
                <p class="font-medium">当前位置</p>
                <p class="text-sm text-blue-100">A-001-008 里程桩附近</p>
                <p class="text-xs text-blue-200">116.4074°E, 39.9042°N</p>
            </div>
            <button class="bg-white/20 p-2 rounded-lg">
                <i class="fas fa-crosshairs"></i>
            </button>
        </div>
    </div>

    <!-- 表单内容 -->
    <div class="px-4 py-6 space-y-6">
        <!-- 缺陷等级 -->
        <div class="bg-white rounded-2xl p-4 shadow-sm">
            <label class="block text-sm font-medium text-gray-700 mb-3">
                <i class="fas fa-exclamation-circle text-red-500 mr-2"></i>缺陷等级
            </label>
            <div class="grid grid-cols-3 gap-3">
                <button class="p-3 border-2 border-red-500 bg-red-50 text-red-700 rounded-xl text-center">
                    <i class="fas fa-exclamation-triangle text-xl mb-1 block"></i>
                    <span class="text-sm font-medium">紧急</span>
                </button>
                <button class="p-3 border-2 border-gray-200 bg-white text-gray-700 rounded-xl text-center">
                    <i class="fas fa-exclamation-circle text-xl mb-1 block"></i>
                    <span class="text-sm font-medium">严重</span>
                </button>
                <button class="p-3 border-2 border-gray-200 bg-white text-gray-700 rounded-xl text-center">
                    <i class="fas fa-info-circle text-xl mb-1 block"></i>
                    <span class="text-sm font-medium">一般</span>
                </button>
            </div>
        </div>

        <!-- 缺陷类型 -->
        <div class="bg-white rounded-2xl p-4 shadow-sm">
            <label class="block text-sm font-medium text-gray-700 mb-3">
                <i class="fas fa-tags text-blue-500 mr-2"></i>缺陷类型
            </label>
            <select class="w-full px-4 py-3 bg-gray-50 border-0 rounded-xl focus:ring-2 focus:ring-blue-500">
                <option>请选择缺陷类型</option>
                <option>管体泄漏</option>
                <option>管道外腐蚀</option>
                <option>管体金属损失</option>
                <option>防腐层损坏</option>
                <option>标识不清</option>
                <option>周围环境异常</option>
                <option>其他</option>
            </select>
        </div>

        <!-- 详细描述 -->
        <div class="bg-white rounded-2xl p-4 shadow-sm">
            <label class="block text-sm font-medium text-gray-700 mb-3">
                <i class="fas fa-edit text-green-500 mr-2"></i>详细描述
            </label>
            <textarea placeholder="请详细描述发现的缺陷情况..." 
                      rows="4"
                      class="w-full px-4 py-3 bg-gray-50 border-0 rounded-xl focus:ring-2 focus:ring-blue-500 resize-none"></textarea>
        </div>

        <!-- 现场照片 -->
        <div class="bg-white rounded-2xl p-4 shadow-sm">
            <label class="block text-sm font-medium text-gray-700 mb-3">
                <i class="fas fa-camera text-purple-500 mr-2"></i>现场照片
            </label>
            <div class="photo-grid">
                <div class="photo-item">
                    <img src="https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=150&h=150&fit=crop" 
                         alt="缺陷照片" class="w-full h-full object-cover rounded-lg">
                </div>
                <div class="photo-item">
                    <img src="https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=150&h=150&fit=crop" 
                         alt="缺陷照片" class="w-full h-full object-cover rounded-lg">
                </div>
                <button class="photo-item text-gray-400 hover:text-blue-500 hover:border-blue-300">
                    <i class="fas fa-plus text-2xl"></i>
                </button>
            </div>
            <div class="flex space-x-3 mt-4">
                <button class="flex-1 bg-blue-100 text-blue-700 py-3 rounded-xl font-medium">
                    <i class="fas fa-camera mr-2"></i>拍照
                </button>
                <button class="flex-1 bg-gray-100 text-gray-700 py-3 rounded-xl font-medium">
                    <i class="fas fa-video mr-2"></i>录像
                </button>
            </div>
        </div>

        <!-- 处理建议 -->
        <div class="bg-white rounded-2xl p-4 shadow-sm">
            <label class="block text-sm font-medium text-gray-700 mb-3">
                <i class="fas fa-lightbulb text-yellow-500 mr-2"></i>处理建议
            </label>
            <textarea placeholder="请提供您的处理建议..." 
                      rows="3"
                      class="w-full px-4 py-3 bg-gray-50 border-0 rounded-xl focus:ring-2 focus:ring-blue-500 resize-none"></textarea>
        </div>

        <!-- 联系方式 -->
        <div class="bg-white rounded-2xl p-4 shadow-sm">
            <label class="block text-sm font-medium text-gray-700 mb-3">
                <i class="fas fa-phone text-green-500 mr-2"></i>联系方式
            </label>
            <input type="tel" placeholder="紧急联系电话" 
                   class="w-full px-4 py-3 bg-gray-50 border-0 rounded-xl focus:ring-2 focus:ring-blue-500">
        </div>

        <!-- 提交按钮 -->
        <div class="flex space-x-3 pt-4">
            <button class="flex-1 bg-gray-100 text-gray-700 py-4 rounded-xl font-medium">
                <i class="fas fa-save mr-2"></i>保存草稿
            </button>
            <button class="flex-1 bg-red-500 text-white py-4 rounded-xl font-medium shadow-lg">
                <i class="fas fa-paper-plane mr-2"></i>立即上报
            </button>
        </div>
    </div>

    <!-- 紧急提示浮层 -->
    <div class="fixed bottom-20 left-4 right-4 bg-red-500 text-white p-4 rounded-2xl shadow-2xl transform translate-y-full transition-transform" id="emergencyTip">
        <div class="flex items-center space-x-3">
            <i class="fas fa-exclamation-triangle text-yellow-300 text-xl"></i>
            <div class="flex-1">
                <p class="font-medium">紧急缺陷提醒</p>
                <p class="text-sm text-red-100">如遇紧急情况，请立即拨打安全热线：400-123-4567</p>
            </div>
            <button onclick="hideTip()" class="text-red-200">
                <i class="fas fa-times"></i>
            </button>
        </div>
    </div>

    <!-- 底部标签栏 -->
    <div class="tab-bar">
        <div class="grid grid-cols-4 gap-1">
            <button class="flex flex-col items-center py-2 text-gray-400">
                <i class="fas fa-home text-lg mb-1"></i>
                <span class="text-xs">首页</span>
            </button>
            <button class="flex flex-col items-center py-2 text-gray-400">
                <i class="fas fa-clipboard-list text-lg mb-1"></i>
                <span class="text-xs">任务</span>
            </button>
            <button class="flex flex-col items-center py-2 text-red-600">
                <i class="fas fa-camera text-lg mb-1"></i>
                <span class="text-xs">上报</span>
            </button>
            <button class="flex flex-col items-center py-2 text-gray-400">
                <i class="fas fa-user text-lg mb-1"></i>
                <span class="text-xs">我的</span>
            </button>
        </div>
    </div>

    <script>
        // 显示紧急提示
        setTimeout(() => {
            document.getElementById('emergencyTip').style.transform = 'translateY(0)';
        }, 3000);

        function hideTip() {
            document.getElementById('emergencyTip').style.transform = 'translateY(100%)';
        }

        // 自动隐藏提示
        setTimeout(hideTip, 10000);
    </script>
</body>
</html>